<template>
  <!-- 合同台账 -->
  <div class="ledgerView">
    <tableIndex
    ref="tableIndexRef"
      :tableData="state.tableData"
      :tableHead="state.tableHead"
      :isIndex="true"
      :isSelection="false"
      :isRadio="false"
      :fields="state.fields"
      :height="500"
      :page="state.page"
      @searchList="searchList"
      @page-change="pageChange"
    >
      <template #right-btn> 
        <div style="float: right">
          
          <el-button
            size="small"
            plain
            class="button_edit"
            @click="onExport(getSearch())"
            ><svg-icon icon-class="export" />导出Excel表</el-button
          >
        </div>
      </template>
    </tableIndex>
  </div>
</template>

<script setup>
import tableIndex from '@/components/table/index.vue'
import { ref, reactive, onMounted } from 'vue'
import { ElForm, ElDatePicker, ElDivider } from 'element-plus'
import { contractApi } from '@/api/project'
import { deriveHandelFnc } from '@/hooks/downCommon'

const exportConfig = reactive({
  fileName: '合同账单',
  apiPath: 'contractCheck',
  form: {}
})
const { onExport } = deriveHandelFnc(exportConfig)

const state = reactive({
  page: {
    total: 0,
    current: 1,
    size: 50
  },
  fields: [
    { key: 'keywords', label: '搜索', type: 'input', placeholder: "请输入关键词" },
    {
      key: 'startTime-endTime',
      label: '合同签订时间范围',
      type: 'datetimerange',
      placeholder: ''
    }
  ],
  tableHead: [
    {
      prop: 'projectSetName',
      label: '项目集名称',
      width: 100
    },
    {
      prop: 'projectName',
      label: '项目名称'
    },
    {
      prop: 'taskName',
      label: '任务名称'
    },
    {
      prop: 'itemName',
      label: '工作细项名称',
      width: 120
    },
    {
      prop: 'taskSource',
      label: '任务来源'
    },
    {
      prop: 'contractName',
      label: '合同名称'
    },
    {
      prop: 'signPartyA',
      label: '项目业主'
    },
    {
      prop: 'projectTypeName',
      label: '合同类型(项目类别)',
      width: 150
    },
    {
      prop: 'tenderTypeName',
      label: '单位产生方式',
      width: 120
    },
    {
      prop: 'contractId',
      label: '合同编号'
    },
    {
      prop: 'companyName',
      label: '己方合同及单位名称',
      width: 150
    },
    {
      prop: 'signPartyB',
      label: '合同对方单位名称',
      width: 150
    },
    {
      prop: 'contractAmount',
      label: '合同(中标)金额(元)',
      width: 150
    },
    {
      prop: 'payExplain',
      label: '合同金额说明',
      width: 120
    },
    {
      prop: 'signTime',
      label: '合同签订时间',
      width: 120
    },
    {
      prop: 'serviceTime',
      label: '服务期限'
    },
    {
      prop: 'warrantyExplain',
      label: '质保期'
    },
    {
      prop: 'signNumber',
      label: '留底份数'
    },
    {
      prop: 'departmentName',
      label: '申请部门'
    },
    {
      prop: 'userName',
      label: '申请人',
      
    }
  ],
  tableData: []
})
const tableIndexRef=ref(null)
//获取列表组件搜索数据
const getSearch = () => {
  return tableIndexRef.value.getSearchData()
}
//搜索接口请求
const searchList = (e) => {
  getPage(e)
}
const getPage = (param={}) => {
    contractApi.ledgerpageList({
    pageNum:state.page.current,
    pageSize:state.page.size,
    param:getSearch()
  }).then(res => {
    if (res.code == 200) {
      state.tableData = res.data.content
      state.page.total= res.data.totalSize
    }
  })
}
onMounted(() => {
  getPage()
})
</script>
<style lang="scss" scoped>
.ledgerView {
  .formBox {
    position: relative;
    .el-button {
      margin-top: -15px;
    }
    :deep(.el-input__wrapper) {
      height: 40px !important;
    }
  }

  .el_classderive {
    border: 1px solid #fc7018;
    color: #fc7018;
    background-color: #fff;
  }

  .el-divider {
    vertical-align: sub;
    height: 30px;
    margin: 0 15px;
  }
}
</style>
